<template>
  <span class="func-list">

    <el-dropdown @command="handleCommandSkin" trigger="hover" class="eldropdown">
      <i class="header-img-size skin-img"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="(item,index) in skins" :key="index" :command="item.name">{{item.label}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-dropdown @command="handleCommand" trigger="hover" class="eldropdown">
      <i :class="getLangImg(locale)"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="(item,key,index) in langs" :key="index" :command="key">{{$t('locales.' + key)}}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <i class="header-img-size full-img" id="nav_fullscreen"></i>
</span>
</template>
<script>
import {LANGS} from 'i18n/lang'
import Vue from 'vue'
export default {
  data(){
    return {
      locale: 'zh-CN',
      langs: LANGS,
      skins: [{name:'default',label:this.$t('default')},{name:'purple',label:this.$t('purple')}],
    };
  },
  mounted() {
    Vue.config.lang = this.locale;
    require("jquery.fullscreen");

    $("#nav_fullscreen").click(function(){
      $('#app').fullScreen({background:"#fff"});
    });
  },
  methods: {
    handleCommand(command) {
      this.locale = command;
      Vue.config.lang = this.locale;
    },
    handleCommandSkin(command) {
      switch (command) {
        case 'purple':
          $('.container').addClass('custom-theme');
          $('.header').css('background-color','#7B7DE5');
          break;
        default:
          $('.container').removeClass().addClass('el-row container');
          $('.header').css('background-color','#20A0FF');
          break;
      }
    },
    getLangImg(locael) {
      switch (locael) {
        case 'zh-CN':
          return 'header-img-size zhong-img'
        case 'en-US':
          return 'header-img-size en-img'
        default:
          return ''
      }
    }
  }
}
</script>
<style scoped>
  .lang {
    cursor: pointer;
    color: #FFF;
  }
  .skin {
    cursor: pointer;
  }
  .en-img {
    background-image: url(../../assets/img/en.svg);
  }
  .zhong-img {
    background-image: url(../../assets/img/zhong.svg);
  }
  .skin-img {
    background-image: url(../../assets/img/skin.svg);
  }
  .full-img {
    background-image: url(../../assets/img/full.svg);
    vertical-align: middle;
    margin-right: 5px;
  }
  .func-list {
    text-align: right;
    vertical-align: middle;
  }
</style>
